<template>
<div class="Box">
    <h3>登录:</h3>
    <el-form ref="Login_form" label-width="80px" :model="Login_form" :rules="rules" status-icon>
        <el-form-item label="账号:" prop="userName">
            <el-input class="Box1" v-model="Login_form.userName" placeholder="请输入账号" prefix-icon = "el-icon-user ft-gray"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="userPassword">
            <el-input class="Box1" placeholder="请输入密码" v-model="Login_form.userPassword" prefix-icon="el-icon-lock ft-gray" show-password></el-input>
        </el-form-item>
        <el-form-item>
            <el-button 
                type="primary" 
                @click="login('Login_form')"  
                v-loading.fullscreen.lock="fullscreenLoading">
                登录
            </el-button>
        </el-form-item>
    </el-form>
    
</div>
    
</template>

<script>
    export default {
        name:'Login',
        data() {
            return{
                loading:false,
                Login_form:{
                    userName:"",
                    userPassword:"",
                },
                rules:{
                    userName:[
                        {required: true, message: '请输入合法账号', trigger: 'blur'},
                        {min: 3, max: 16, message: '长度在3到16 个字符', trigger: 'blur'}
                    ],
                    userPassword:[
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 4, max: 20, message: '长度在6到20 个字符', trigger: 'blur'},
                    ]
                }
            }
        
        },
        methods:{
            login(formname) {
                this.$message.success('登录成功！')
                    this.$router.push ('/Menu')
                this.$refs[formname].validate(async (valid) => {
                    if (!valid) return;
                    this.loading = true;
                    let params = new URLSearchParams();
                    params.append('userName', this.Login_form.userName);
                    params.append('userPassword', this.Login_form.userPassword);
                    let data = await this.$http.post("login", params);
                    console.log(data);
                    this.$message.success('登录成功！')
                    this.$router.push ('/Menu')
                    if (data.code == 1) {
                          sessionStorage.userInfo = JSON.stringify({
                              name:data.data.name,
                              token:data.data.token
                    })
                         this.$message.success(data.message);
                         this.$router.push ('/Menu')
                     }else {
                         this.$message.error(data.message);
                     }
                });
            }
        }
    }
</script>

<style>
    .Box{
        margin-top: 270px;
        margin-left: 550px;
        margin-right: 400px;
    }
    .Box1{
        width: 250px;
        height: 5px;
    }
</style>